<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js"></script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js"></script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js"></script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js"></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script> 
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>		
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>	
		<script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/toolbar/ctp.ui.toolbar.js">
        </script>
		<link href="../../css/toolbar.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
		<link href='../../css/skins/standard/ctp-common.css' rel='stylesheet' type='text/css'/>
		<link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/label.css" rel="stylesheet" type="text/css"/>
	    <script>
	    	var CTP_WEB_FULLPATH="../../";
        	//ctp.core.log.lvl=ctp.core.loglvl.obj;
			$(document).ready(function(){ 			                 
 			var toolbar1 = new ctp.ui.toolbar({
                    id: 'toolbar1',
                    border: 'bottom',
                    leftItems: [{
                        id: "bottom1",
                        type: 'button',
                        text: '新增',
                        icon: 'add',
                        onClick: function(){
                        }
                    }, '-', {
                        id: "bottom2",
                        type: 'button',
                        text: '修改',
                        icon: 'edit',
                        onClick: function(){
                        }
                    }     
                    ]
                });	
                var button3=new ctp.ui.button({
                    id: 'button3',
                    text: '改变标题名称为HELLO,且字体颜色改为白色',
                    width: '100%',
                    onClick: function(){
                        panel1.setTitle('<font color="#FFFFFF">HELLO</font>');
                    }
                });
               
				var panel3=new ctp.ui.panel({
			  	id:'panel3',
				style:'none',width:'100',height:'100'
			  });
			  var panel2= new ctp.ui.panel({
			  	id:'panel2',
				height:'200',
				style:'border',
				html:'<div style="position:absolute;border:2px solid red;left:34px;top:50px;width:50px;height:50px;"></div>'
			  });
              var panel1=new ctp.ui.panel({
			  	id:'panel1',
				closable:'true',
				height:'auto',
				visible:'visible',
				html:'b',
				title: '有表头的面板',
				toolbar:toolbar1,
				toolbarPos:'innertop'
			  });
                var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '98%',
                    cols: 2,
                    align: 'center',
                    colSpace: 30,
					defaults: {display: 'h',align: 'center',label:{width:'100px'}},	
					items: [[{
						label: {
							id: 'p1',
							text: '有头的面板'
						},
						element: panel1
					}],[{label: {
							id: 'p2',
							text: '只有框的面板'
						},element:panel2}],[{label: {
							id: 'p3',
							text: '隐形的面板'
						},element:panel3}]]
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[showLayout],
					title:'效果展示区'				   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 1,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button3}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				 panelCode = new ctp.ui.panel({
                    id: 'panelCode',
                    style: 'none',
					height:'auto'
                });
				var gbCode = new ctp.ui.groupbox({
                    id: 'gbCode',
                    title: '源码',
                    items: [
                        panelCode
                    ]
                });
				new ctp.ui.panel({
					id:'panel8',
                    title: 'panel实例',
                    collapsible: true,
                    width: '550px',
                    height: 'auto',
					align:'center',
					closable:'true',
					items:[showGroupbox,buttonsGroupbox,gbCode],
					
                    renderTo: 'body'
                });            
            });
        </script>
    </head>
    <BODY>
    	<div id="b">abc</div>
    	<b>ctp.ui.panel实例</b><hr/><br/>
</BODY>
</html>